import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import RegisterItem from '../../Common/RegisterLoginItem/RegisterLoginItem.jsx';
//import Using ES6 syntax
import WeUI from 'react-weui';

//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/Register.css';
const {Toptips} = WeUI;
export default class Login extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.LoginClick = this.LoginClick.bind(this);
        this.RegisterClick = this.RegisterClick.bind(this);
    }

    componentWillMount() { //组件即将被插入
        this.state = {
            data: {
                title: "登录",
                describe: "欢迎您",
                inputName1: "手机号",
                inputName2: "密码",
                messagesCodeTitle: "",
                forgetPassword: "忘记密码点我",
                buttonTitle: "登录",
                type: "password",
                phoneNumType: "",

            },
            showWarn: false,
            showSuccess: false,
            warnTimer: null,
            successTimer: null,
            tipText: "",
        };
        this.state.warnTimer && clearTimeout(this.state.warnTimer);
        this.state.successTimer && clearTimeout(this.state.successTimer);
    }

    LeftClick() {
    }

    showWarn(text) {
        this.setState({showWarn: true, tipText: text});

        this.state.warnTimer = setTimeout(()=> {
            this.setState({showWarn: false});
        }, 2000);
    }

    showSuccess() {
        this.setState({showSuccess: true});

        this.state.successTimer = setTimeout(()=> {
            this.setState({showSuccess: false});
            location.hash = "/TeamList";
        }, 1000);
    }

    login(phoneNum, password) {
        let self = this;
        let fromData = new FormData();
        fromData.append("mobile", phoneNum)
        fromData.append("password", password)
        fetch(getHost() + "/user/login", {
            method: 'POST',
            credentials: 'include',
            body: fromData
        }).then(response => response.json()).then(json => {
            if (json.success) {
                console.log(json)
                self.showSuccess();

            } else {
                self.showWarn("登录失败")
                console.log(json.error)
            }
        }).catch(e => {
            console.log("网络出现了点问题：" + e);
            self.showWarn("网络出现了点问题");
        });
    }

    LoginClick(phoneNum, password) {
        if (password.length < 1 || password.length < 1) {
            this.showWarn("密码或手机不能为空");
            return false;
        } else {
            this.login(phoneNum, password);
        }
    }

    RegisterClick() {
        location.hash = "/RegisterAccount"
    }

    render() {
        return (
            <div>
                <NavigationBar Title="登录" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <RegisterItem data={this.state.data} callbackParent={this.LoginClick}/>
                <div className="RegisterAccountDiv" onClick={this.RegisterClick}>没有账户?<span style={{color: "#0088EC"}}>注册</span>
                </div>
                <Toptips type="warn" show={this.state.showWarn}>{this.state.tipText}</Toptips>
                <Toptips type="primary" show={this.state.showSuccess}> 登录成功 </Toptips>
            </div>
        )
    }
}
//属性默认值
Login.defaultProps = {};

//属性
Login.propTypes = {};